<%--
  Created by IntelliJ IDEA.
  User: kin
  Date: 2017/9/11
  Time: 13:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<%@ include file="/commons/head.jsp" %>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <%@ include file="/commons/left.jsp" %>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                控制面板
            </h1>
        </section>
        <section class="content">
            <div class="row">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-aqua"><i class="ion ion-flag"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">案件管理</span>
                            <span class="info-box-number">90<small> 件</small></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-red"><i class="fa ion-clock"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">举报投诉</span>
                            <span class="info-box-number">41,410<small> 件</small></span>
                        </div>
                    </div>
                </div>
                <div class="clearfix visible-sm-block"></div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-green"><i class="ion ion-email-unread"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">公文交换</span>
                            <span class="info-box-number">760<small> 件</small></span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="info-box">
                        <span class="info-box-icon bg-yellow"><i class="ion ion-chatbox-working"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">在线咨询</span>
                            <span class="info-box-number">2,000<small> 条</small></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="box box-success">
                        <div class="box-header with-border">
                            <h3 class="box-title">案件分布</h3>
                            <div class="pull-right box-tools">
                                <button type="button" class="btn btn-success btn-sm" data-widget="" onclick="GetMap();">
                                    <i id="divMap" class="fa fa-window-maximize"></i>
                                </button>
                            </div>
                        </div>
                        <div class="box-body no-padding">
                            <div class="row">
                                <div class="col-md-9 col-sm-8">
                                    <div class="pad">
                                        <div id="world-map-markers" style="height: 325px;"></div>
                                    </div>
                                </div>
                                <div class="col-md-3 col-sm-4">
                                    <div class="pad box-pane-right bg-green" style="min-height: 280px">
                                        <div class="description-block margin-bottom">
                                            <div class="sparkbar pad" data-color="#fff">90,70,90,70,75,80,70</div>
                                            <h5 class="description-header">83 件</h5>
                                            <span class="description-text">宁夏回族自治区</span>
                                        </div>
                                        <div class="description-block margin-bottom">
                                            <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
                                            <h5 class="description-header">58 件</h5>
                                            <span class="description-text">甘肃省</span>
                                        </div>
                                        <div class="description-block">
                                            <div class="sparkbar pad" data-color="#fff">90,50,90,70,61,83,63</div>
                                            <h5 class="description-header">32 件</h5>
                                            <span class="description-text">内蒙古自治区</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="info-box bg-yellow">
                        <span class="info-box-icon"><i class="ion ion-star"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">商标</span>
                            <span class="info-box-number">5,200</span>
                            <div class="progress">
                                <div class="progress-bar" style="width: 50%"></div>
                            </div>
                            <span class="progress-description">
                                    报案：230 起
                                </span>
                        </div>
                    </div>
                    <div class="info-box bg-green">
                        <span class="info-box-icon"><i class="ion ion-heart"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">专利</span>
                            <span class="info-box-number">92,050</span>
                            <div class="progress">
                                <div class="progress-bar" style="width: 20%"></div>
                            </div>
                            <span class="progress-description">
                                    报案：50 起
                                </span>
                        </div>
                    </div>
                    <div class="info-box bg-red">
                        <span class="info-box-icon"><i class="ion ion-star"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">著作权</span>
                            <span class="info-box-number">114,381</span>
                            <div class="progress">
                                <div class="progress-bar" style="width: 70%"></div>
                            </div>
                            <span class="progress-description">
                                    报案：150 起
                                </span>
                        </div>
                    </div>
                    <div class="info-box bg-aqua">
                        <span class="info-box-icon"><i class="ion ion-flag"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">其它</span>
                            <span class="info-box-number">163,921</span>
                            <div class="progress">
                                <div class="progress-bar" style="width: 40%"></div>
                            </div>
                            <span class="progress-description">
                                    报案：252 起
                                </span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <h3 class="box-title">趋势分析</h3>
                        </div>
                        <div class="box-body">
                            <div class="row">
                                <div class="col-md-8" style="width:100%;">
                                    <p class="text-center">
                                        <strong>案件趋势分析</strong>
                                    </p>
                                    <div class="chart">
                                        <canvas id="salesChart" style="height: 180px;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="box-footer">
                            <div class="row">
                                <div class="col-sm-3 col-xs-6">
                                    <div class="description-block border-right">
                                        <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
                                        <h5 class="description-header">35</h5>
                                        <span class="description-text">商标</span>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-xs-6">
                                    <div class="description-block border-right">
                                        <span class="description-percentage text-yellow"><i
                                                class="fa fa-caret-left"></i> 0%</span>
                                        <h5 class="description-header">45</h5>
                                        <span class="description-text">专利</span>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-xs-6">
                                    <div class="description-block border-right">
                                        <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
                                        <h5 class="description-header">72</h5>
                                        <span class="description-text">著作权</span>
                                    </div>
                                </div>
                                <div class="col-sm-3 col-xs-6">
                                    <div class="description-block">
                                        <span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
                                        <h5 class="description-header">62</h5>
                                        <span class="description-text">其它</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <%@ include file="/commons/script.jsp" %>
    <script src="${ctx}/bower_components/chart.js/Chart.js"></script>
    <script src="${ctx}bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
    <script src="${ctx}/plugins/jvectormap/jquery-jvectormap-2.0.3.min.js"></script>
    <script src="${ctx}/plugins/jvectormap/jquery-jvectormap-cn-mill.js"></script>
    <script src="${ctx}/dist/js/pages/dashboard2.js"></script>
    <script src="${ctx}/dist/js/demo.js"></script>
    <script src="${ctx}/dist/js/move.js"></script>
    <script src="${ctx}/dist/js/cookie.js"></script>
    <script src="${ctx}/dist/js/echarts.js"></script>
    <script src="${ctx}/dist/js/china.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('world-map-markers'));
        //配置地图
        myChart.setOption({
            series: [{
                type: 'map',
                map: 'china'
            }]
        });
        // 指定图表的配置项和数据
        var data = [
            {name: '银川', value: 150},
            {name: '西安', value: 21},
            {name: '兰州', value: 35},
            {name: '成都', value: 100},
            {name: '太原', value: 48}
        ];
        //城市设置[经度，纬度]
        var geoCoordMap = {
            '银川': [106.236676, 38.494425],
            '西安': [108.945731, 34.347198],
            '兰州': [103.840117, 36.067078],
            '成都': [104.08099, 30.656588],
            '太原': [112.55476, 37.878936]
        };

        //浮层内容的设置（）
        var $imgs = [
            {area: '银川', txt: '150'},
            {area: '西安', txt: '21'},
            {area: '兰州', txt: '35'},
            {area: '成都', txt: '100'},
            {area: '太原', txt: '48'}
        ];

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        option = {
            backgroundColor: '#eee',
            title: {
                text: '',//标题
                subtext: '',
                sublink: '#',//subtext跳转地址
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            //浮层设置
            tooltip: {
                trigger: 'item',
                formatter: function (params, ticket, callback) {
                    var $pna = params.name;
                    var res = "";

                    for (var i = 0; i < $imgs.length; i++) {
                        if ($imgs[i].area == $pna) {
                            res = '<p>' + $imgs[i].txt + '</p>';//设置自定义数据的模板，这里的模板是文字
                            //console.log(res);
                            break;
                        }
                    }

                    setTimeout(function () {
                        // 仅为了模拟异步回调
                        callback(ticket, res);//回调函数，这里可以做异步请求加载的一些代码
                    }, 15)
                    return "loading";
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                roam: true,
                itemStyle: {
                    normal: {
                        areaColor: '#B22222 ',
                        borderColor: '#800000'
                    },
                    emphasis: {
                        areaColor: '#800000'
                    }
                }
            },
            series: [
                {
                    name: '前三',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: false
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#ddb926'
                        }
                    }
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: convertData(data.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 5)),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'yellow',
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    zlevel: 1
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
    <script type="text/javascript">
        $(function () {
            if ($.cookie("isClose") != 'yes') {
                TanChuang();
                setTimeout("minTanChuang()", 5000); //测试5秒自动关闭
            }
        });

        function minTanChuang() {
            $("#btn_min").click();
        }

        function TanChuang() {
            var oDiv = document.getElementById('miaov_float_layer');
            var oBtnMin = document.getElementById('btn_min');
            var oBtnClose = document.getElementById('btn_close');
            var oDivContent = oDiv.getElementsByTagName('div')[0];

            var iMaxHeight = 0;

            var isIE6 = window.navigator.userAgent.match(/MSIE 6/ig) && !window.navigator.userAgent.match(/MSIE 7|8/ig);

            oDiv.style.display = 'block';
            iMaxHeight = oDivContent.offsetHeight;

            if (isIE6) {
                oDiv.style.position = 'absolute';
                repositionAbsolute();
                miaovAddEvent(window, 'scroll', repositionAbsolute);
                miaovAddEvent(window, 'resize', repositionAbsolute);
            }
            else {
                oDiv.style.position = 'fixed';
                repositionFixed();
                miaovAddEvent(window, 'resize', repositionFixed);
            }

            oBtnMin.timer = null;
            oBtnMin.isMax = true;
            oBtnMin.onclick = function () {
                startMove
                (
                    oDivContent, (this.isMax = !this.isMax) ? iMaxHeight : 0,
                    function () {
                        oBtnMin.className = oBtnMin.className == 'min' ? 'max' : 'min';
                    }
                );
            };

            oBtnClose.onclick = function () {
                oDiv.style.display = 'none';
                oDiv.innerHTML = "";
                $.cookie("isClose", 'yes', {expires: 1 / 8640});  //测试关闭十秒后才能再次弹出
            };

        }

        function GetMap() {

        }
    </script>
</div>
</body>
</html>
